<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="店铺编码" prop="storeCode">
        <el-input v-model="queryParams.storeCode" placeholder="请输入店铺编码" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品名称" prop="productName">
        <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="省" prop="provinceId">
        <el-input v-model="queryParams.provinceId" placeholder="请输入省" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="市" prop="cityId">
        <el-input v-model="queryParams.cityId" placeholder="请输入市" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="县" prop="countyId">
        <el-input v-model="queryParams.countyId" placeholder="请输入县" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品标识" prop="productFlag">
        <el-select v-model="queryParams.productFlag" placeholder="请选择商品标识" clearable>
          <el-option v-for="dict in dict.type.product_flag" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间" prop="crTime">
        <el-date-picker clearable v-model="queryParams.crTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间" prop="upTime">
        <el-date-picker clearable v-model="queryParams.upTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['store:productinfo:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['store:productinfo:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['store:productinfo:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['store:productinfo:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productinfoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="商品编码" align="center" prop="productCode" />
      <el-table-column label="店铺编码" align="center" prop="storeCode" />
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="商品主图" align="center" prop="productManUrl">
        <template slot-scope="scope">
          <img :src="scope.row.productManUrl" mode="aspect" width="100%" alt="图片">
        </template>
      </el-table-column>
      <!-- 规格 -->
      <!-- <el-table-column label="规格" align="center" width="300px" prop="productManUrl">
        <template v-slot="{row, $index: index}">
          <div @click="viewKc(row)">查看规格</div>
        </template>
      </el-table-column> -->
      <!--  -->
      <!-- <el-table-column label="售价" align="center" prop="salePrice" />
      <el-table-column label="采购价" align="center" prop="purchasePrice" /> -->
      <el-table-column label="商品描述" width="350" align="center" prop="productDescription">
        <template slot-scope="scope">
          <div style="height: 200px;overflow: auto;" v-html="scope.row.productDescription">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="优惠券" align="center" prop="couponFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.couponFlag" />
        </template>
      </el-table-column>
      <el-table-column label="最大优惠金额" align="center" prop="couponMax" />
      <!-- <el-table-column label="省" align="center" prop="provinceId" />
      <el-table-column label="市" align="center" prop="cityId" />
      <el-table-column label="县" align="center" prop="countyId" /> -->
      <el-table-column label="商品标识" align="center" prop="productFlag">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.product_flag" :value="scope.row.productFlag" />
        </template>
      </el-table-column>
      <el-table-column label="发货地" align="center" prop="productFrom" />
      <el-table-column label="热度排序" align="center" prop="hotSort" />
      <el-table-column label="已售数量" align="center" prop="saleSort" />
      <el-table-column fixed="right" width="220" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="viewKc(scope.row)"
            v-hasPermi="['store:productinfo:edit']">查看规格</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['store:productinfo:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['store:productinfo:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
      <el-dialog :visible.sync="viewDialogVisible" width="600px">
      <el-table :data="viewGgData" style="width: 100%">
              <el-table-column prop="mainUrl" label="商品图片">
                <template slot-scope="scope">
                  <img :src="scope.row.mainUrl" width="100%" alt="图片">
                </template>
              </el-table-column>
              <el-table-column prop="purchasePrice" label="采购价"></el-table-column>
              <el-table-column prop="salePrice" label="售价"></el-table-column>
              <el-table-column prop="specification" label="规格"></el-table-column>
              <el-table-column prop="productNumble" label="库存"></el-table-column>
              <el-table-column prop="productFlag" label="商品标识">
                <template slot-scope="scope">
                  <div>
                    {{scope.row.productFlag === '0' ? '未生效': '已生效'}}
                  </div>
                </template>
              </el-table-column>
            </el-table>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog :title="dialogTitle" @close="cancelKK" :visible.sync="dialogVisible" width="600px">
      <el-form :model="editForm">
        <el-form-item label="商品图片">
          <el-upload class="upload-demo" action="" :on-preview="handlePreviewNun" :on-remove="handleRemoveNun"
            ref="upload1" :before-remove="beforeRemoveNun" :auto-upload="false" :limit="1" :on-change="fileChangeun"
            :on-success="handle_successNun" :on-exceed="handleExceedNun" :file-list="fileListN1">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUploadun">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <ul class="image-list">
            <li v-for="(item, index) in listNew1" :key="index">
              <img :src="item.url" style="width: 100%;height: 100%;" mode="aspectFill" :alt="item.name">
              <span style="font-size: 16px;" @click="deleteImageun(index)">x</span>
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="采购价">
          <el-input v-model="editForm.purchasePrice"></el-input>
        </el-form-item>
        <el-form-item label="售价">
          <el-input v-model="editForm.salePrice"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="editForm.specification"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="editForm.productNumble"></el-input>
        </el-form-item>
        <el-form-item label="商品标识">
          <el-select v-model="editForm.productFlag" placeholder="请选择商品标识">
            <el-option v-for="dict in dictArr" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelKK">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加或修改商品类目对话框 -->
    <el-dialog :title="title" :visible.sync="open" @close="cancel"  width="1200px" append-to-body>
      <div style="width: 100%;min-height: 600px;">
        <div style="text-align: right;">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="基本信息">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <el-form-item label="店铺名称" prop="storeCode">
                <el-select v-model="form.storeCode" placeholder="请输入店铺名称">
                  <el-option v-for="dict in allList" :key="dict.storeCode" :label="dict.storeName"
                    :value="dict.storeCode"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品名称" prop="productName">
                <el-input v-model="form.productName" placeholder="请输入商品名称" />
              </el-form-item>

              <el-form-item label="内容" prop="productDescription">
                <editor v-model="form.productDescription" :min-height="192" />
              </el-form-item>
              <el-form-item label="商品标识" prop="productFlag">
                <el-select v-model="form.productFlag" placeholder="请选择商品标识">
                  <el-option v-for="dict in dict.type.product_flag" :key="dict.value" :label="dict.label"
                    :value="dict.value"></el-option>
                </el-select>
              </el-form-item><el-form-item label="商品主图" prop="productManUrl">
                <el-upload class="upload-demo" action="" :on-preview="handlePreviewN"
                  :on-remove="handleRemoveN" ref="upload" :before-remove="beforeRemoveN" :auto-upload="false" :limit="1"
                  :on-change="fileChange" :on-success="handle_successN" :on-exceed="handleExceedN"
                  :file-list="fileListN">
                  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  <el-button style="margin-left: 10px;" size="small" type="success"
                    @click="submitUpload">上传到服务器</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <ul class="image-list">
                  <li v-for="(item, index) in listNew" :key="index">
                    <img :src="item.url" style="width: 100%;height: 100%;" mode="aspectFill" :alt="item.name">
                    <span style="font-size: 16px;" @click="deleteImage(index)">x</span>
                  </li>
                </ul>
              </el-form-item>
              <el-form-item label="商品展示价格" prop="productShowPrice">
                <el-input v-model="form.productShowPrice" placeholder="请输入商品展示价格" />
              </el-form-item>

              <!-- <el-form-item label="售价" prop="salePrice">
              <el-input v-model="form.salePrice" placeholder="请输入售价" />
            </el-form-item> -->
              <!-- <el-form-item label="采购价" prop="purchasePrice">
              <el-input v-model="form.purchasePrice" placeholder="请输入采购价" />
            </el-form-item> -->
              <!-- <el-form-item label="规格" prop="specification">
              <el-input v-model="form.specification" placeholder="请输入规格" />
            </el-form-item> -->
              <!-- <el-form-item label="商品描述" prop="productDescription">
              <el-input v-model="form.productDescription" type="textarea" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item label="优惠券" prop="couponFlag">
              <el-input v-model="form.couponFlag" placeholder="请输入优惠券" />
            </el-form-item>
            <el-form-item label="最大优惠金额" prop="couponMax">
              <el-input v-model="form.couponMax" placeholder="请输入最大优惠金额" />
            </el-form-item> -->

            <el-form-item label="发货人" prop="receiveUser">
              <el-input v-model="form.receiveUser" placeholder="请输入发货人" />
            </el-form-item> 
            <el-form-item label="发货人手机号" prop="receivePhone">
              <el-input v-model="form.receivePhone" placeholder="请输入发货人手机号" />
            </el-form-item> 
              <el-form-item label="发货地址" prop="provinceCityCountry">
                <el-cascader v-model="form.provinceCityCountry" :options="addressXz" :props="propsObj"
                  @change="handleChange"></el-cascader>
              </el-form-item>
              <!-- <el-form-item label="省" prop="provinceId">
              <el-input v-model="form.provinceId" placeholder="请输入省" />
            </el-form-item>
            <el-form-item label="市" prop="cityId">
              <el-input v-model="form.cityId" placeholder="请输入市" />
            </el-form-item>
            <el-form-item label="县" prop="countyId">
              <el-input v-model="form.countyId" placeholder="请输入县" />
            </el-form-item> -->
              <el-form-item label="发货地详细地址" prop="productFrom">
                <el-input v-model="form.productFrom" placeholder="请输入具体地址" />
              </el-form-item>

              <!-- 退货地详情地址 -->
              <el-form-item label="退货地址" prop="backProvinceCityCountry">
                <el-cascader v-model="form.backProvinceCityCountry" :options="addressXz" :props="propsObj"
                  @change="backHandleChange"></el-cascader>
              </el-form-item>
              <el-form-item label="退货地详细地址" prop="backFrom">
                <el-input v-model="form.backFrom" placeholder="请输入退货地详细地址" />
              </el-form-item>
              <el-form-item label="退货收货人" prop="returnUser">
                <el-input v-model="form.returnUser" placeholder="请输入退货收货人" />
              </el-form-item>
              <el-form-item label="退货手机号" prop="returnPhone">
                <el-input v-model="form.returnPhone" placeholder="请输入退货手机号" />
              </el-form-item>


              <el-form-item label="热度排序" prop="hotSort">
                <el-input v-model="form.hotSort" placeholder="请输入热度排序" />
              </el-form-item>
              <el-form-item label="已售数量（虚拟）" prop="saleSort">
                <el-input v-model="form.saleSort" placeholder="请输入已售数量" />
              </el-form-item>
              <el-form-item label="产地" prop="saleSort">
                <el-input type="textarea" v-model="form.fromAddress" placeholder="请输入产地" />
              </el-form-item>
              <el-form-item label="产品故事" prop="saleSort">
                <el-input type="textarea" v-model="form.productStory" placeholder="请输入产品故事" />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="规格">
            <el-button @click="handleAddGg">新增</el-button>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="mainUrl" label="商品图片">
                <template slot-scope="scope">
                  <img :src="scope.row.mainUrl" width="100%" alt="图片">
                </template>
              </el-table-column>
              <el-table-column prop="purchasePrice" label="采购价" sortable></el-table-column>
              <el-table-column prop="salePrice" label="售价" sortable></el-table-column>
              <el-table-column prop="specification" label="规格" sortable></el-table-column>
              <el-table-column prop="productNumble" label="库存" sortable></el-table-column>
              <el-table-column prop="productFlag" label="商品标识" sortable>
                <template slot-scope="scope">
                  <div>
                    {{scope.row.productFlag === '0' ? '未生效': '已生效'}}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"
                    v-hasPermi="['store:productinfo:edit']">修改</el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelGg(scope.$index, scope.row)"
                    v-hasPermi="['store:productinfo:remove']">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    uploadImages,
    getOrderAddress,
    fileDeleteOss
  } from "@/api/system/user";

  import {
    listProductinfo,
    getProductinfo,
    delProductinfo,
    addProductinfo,
    getinventorylist,
    updateProductinfo,
    onlinestoreAllList
  } from "@/api/store/productinfo";

  export default {
    name: "Productinfo",
    dicts: ['product_flag'],
    data() {
      return {
        nestedTableData: [],
        dictArr: [{
            value: '0',
            label: '未生效'
          },
          {
            value: '1',
            label: '已生效'
          }
        ],
        tableData: [],
        editForm: {},
        dialogVisible: false,
        dialogTitle: '',
        tabPosition: 'left',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品类目表格数据
        productinfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          storeCode: null,
          productName: null,
          productManUrl: null,
          salePrice: null,
          purchasePrice: null,
          specification: null,
          productDescription: null,
          couponFlag: null,
          couponMax: null,
          provinceId: null,
          cityId: null,
          countyId: null,
          productFlag: null,
          productFrom: null,
          fromAddress:null,
          productStory:null,
          hotSort: null,
          saleSort: null,
          ratingNumb: null,
          crTime: null,
          upTime: null,
          backProvinceId:null,
          backCityId:null,
          backCountyId:null,
          backFrom:null,
          returnUser:null, 
          returnPhone:null,
          receiveUser:null,
          receivePhone:null
        },
        // 表单参数
        form: {},
        xlsFile: [],
        fileListN: [],
        listNew: [],
        xlsFile1: [],
        fileListN1: [],
        listNew1: [],
        // 表单校验
        rules: {},
        allList: [],

        addressXz: [],
        propsObj: {
          label: 'text',
          value: 'value',
          option: 'children',
        },
        pastInventoryList: [],
        pastProductInfo: {},
        // 修改的
        updateInventoryList: [],
        // 新增的
        insertInventoryList: [],
        inventoryIdids: [],
        viewDialogVisible:false,
        viewGgData:[]
      };
    },
    created() {
      this.getList();
      this.getonlinestoreAllList()
      this.getOrderAddress();
    },
    methods: {
      viewKc(row) {
        this.viewDialogVisible = true
        getinventorylist(row.productCode).then(response => {
          if (response.code == '200') {
            this.viewGgData = response.data
          }
        });
      },
      backHandleChange(value){
        console.log('=========================================')
        this.form.backProvinceId = value[0]
        this.form.backCityId = value[1]
        this.form.backCountyId = value[2]
        console.log(value);
      },
      handleChange(value) {
        console.log('=========================================')
        this.form.province = value[0]
        this.form.city = value[1]
        this.form.county = value[2]
        console.log(value);
      },
      getOrderAddress() {
        getOrderAddress().then(response => {
          if (response.code == '200') {
            this.addressXz = JSON.parse(JSON.parse(response.data))
          }
        });
      },
      // 身份证正面
      handlePreviewN() {},
      handleRemoveN() {},
      beforeRemoveN() {},
      fileChange(file, fileList) {
        console.log(file, fileList,'0000000000000000')
        console.log(3433333333333333333333)
        this.xlsFile = fileList
      },
      handle_successN(res) {
        console.log('图片上传成功')
      },
      submitUpload() {
        if(this.xlsFile.length<=0){
          this.$modal.msgSuccess("请先选取图片");
          return
        }
        const newArr = this.xlsFile.map(item => {
          return item.raw
        });
        let formData = new FormData();
        newArr.forEach((file, index) => {
          formData.append(`file[${index}]`, file);
        });
        uploadImages(formData).then(response => {
          if (response.code == '200') {
            this.listNew = response.data
            let imgUrl = response.data[0].url;
            this.form.productManUrl = imgUrl;
            this.xlsFile = []
            this.fileListN = []
          }
        });
      },
      deleteImage(index) {
        let res = this.listNew[index].url
        const data = {
          'fileName': res
        }
        fileDeleteOss(data).then(response => {
          if (response.code == '200') {
            this.listNew.splice(index, 1)
            this.$modal.msgSuccess("删除成功");
          }
        });
      },
      handleExceedN() {},
      // 身份证反面

      handlePreviewNun() {},
      handleRemoveNun() {},
      beforeRemoveNun() {},
      fileChangeun(file, fileList) {
        console.log(fileList, '============')
        this.xlsFile1 = fileList
      },
      handle_successNun(res) {
        console.log('图片上传成功')
      },
      submitUploadun() {
        if(this.xlsFile1.length<=0){
          this.$modal.msgSuccess("请先选取图片");
          return
        }
        const newArr = this.xlsFile1.map(item => {
          return item.raw
        });
        let formData = new FormData();
        newArr.forEach((file, index) => {
          formData.append(`file[${index}]`, file);
        });
        uploadImages(formData).then(response => {
          if (response.code == '200') {
            this.listNew1 = response.data
            this.xlsFile1 = []
            this.fileListN1 = []
          }
        });
      },
      deleteImageun(index) {
        let res = this.listNew1[index].url
        const data = {
          'fileName': res
        }
        fileDeleteOss(data).then(response => {
          if (response.code == '200') {
            this.listNew1.splice(index, 1)
            this.$modal.msgSuccess("删除成功");
          }
        });
      },
      handleExceedNun() {},
      handleAddGg() {
        this.dialogVisible = true;
        this.dialogTitle = '新增';
        this.editForm = {}; // 清空表单
      },

      // this.form = response.data;
      //     this.open = true;
      //     this.title = "修改商品类目";
      //     this.listNew.push({
      //       url: this.form.productManUrl
      //     })
      //     // this.listNew1.push({url:this.form.legalPersonPicReverse})
      //     this.form.provinceCityCountry = [this.form.provinceId, this.form.cityId, this.form.countyId]
      //     this.pastProductInfo = JSON.parse(JSON.stringify(response.data))



      handleEdit(index, row) {
        console.log(index,row,'=====')
        this.dialogVisible = true;
        this.dialogTitle = '编辑';
        this.editForm = Object.assign({}, row); // 复制行数据到表单
// 这里呀
// 规格新增弹窗里面的图片
this.listNew1.push({
            url: this.editForm.mainUrl
          })


      },
      handleDelGg(index, row) {
        this.tableData.splice(index, 1); // 删除对应行
        console.log(row, '333')
        if (row.inventoryId) {
          this.inventoryIdids.push(row.inventoryId)
        }
      },
      handleSubmit() {
        if (this.dialogTitle === '新增') {
          this.editForm.mainUrl = this.listNew1[0].url
          console.log(this.editForm, '33333333333')
          this.tableData.push(this.editForm);
          this.editForm.productCode = this.form.productCode
          this.insertInventoryList.push(this.editForm)
        } else {
          // 上传成功之后，把文件给替换了这里呀
          console.log(this.tableData,'333333=============22')
          console.log(this.editForm,'333333==============3')
          // 编辑操作
          // 假设我们知道了编辑的索引，这里需要更新对应行
          if(this.listNew1.length>0){
            this.editForm.mainUrl = this.listNew1[0].url
          }
          let idx = this.tableData.findIndex((w) => w.inventoryId == this.editForm.inventoryId)
          this.tableData.splice(idx, 1, this.editForm);
          this.updateInventoryList.splice(idx, 1, this.editForm);
        }
        this.dialogVisible = false;
      },
      /** 查询商品类目列表 */
      getList() {
        this.loading = true;
        listProductinfo(this.queryParams).then(response => {
          this.productinfoList = response.data;
          this.total = response.total;
          this.loading = false;
        });
      },
      getonlinestoreAllList() {
        onlinestoreAllList().then(response => {
          console.log(response.data,'3433333333333333333333333333')
          this.allList = response.data
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },

      cancelKK(){
this.dialogVisible = false
this.resetLb();
      },

      resetLb() {
        this.editForm = {
          purchasePrice: null,
          salePrice: null,
          specification: null,
          productNumble: null,
          productFlag: null,
        };
        this.resetForm("editForm");
        this.xlsFile1=[];
        this.fileListN1=[];
        this.listNew1=[];
        // this.tableData = []
      },
      // 表单重置
      reset() {
        this.form = {
          storeCode: null,
          productName: null,
          productManUrl: null,
          productShowPrice: null,
          productFlag: null,
          provinceId: null,
          cityId: null,
          countyId: null,
          productFrom: null,
          hotSort: null,
          fromAddress:null,
          productStory:null,
          saleSort: null,
          productDescription: null,
          backProvinceId:null,
          backCityId:null,
          backCountyId:null,
          backFrom:null,
          returnUser:null, 
          returnPhone:null,
          receiveUser:null,
          receivePhone:null
        };
        this.resetForm("form");
        this.xlsFile=[];
        this.fileListN=[];
        this.listNew=[];
        this.tableData = []

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.productCode)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加商品类目";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const productCode = row.productCode || this.ids
        // 回显规格接口
        getinventorylist(row.productCode).then(response => {
          if (response.code == '200') {
            this.tableData = response.data
            this.pastInventoryList = JSON.parse(JSON.stringify(response.data))
          }
        });
        //  回显基本信息
        getProductinfo(productCode).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改商品类目";
          this.listNew.push({
            url: this.form.productManUrl
          })
          // this.listNew1.push({url:this.form.legalPersonPicReverse})
          this.form.provinceCityCountry = [this.form.provinceId, this.form.cityId, this.form.countyId]
          this.form.backProvinceCityCountry = [this.form.backProvinceId, this.form.backCityId, this.form.backCountyId
          ]
          this.pastProductInfo = JSON.parse(JSON.stringify(response.data))
        });
        // 修改的
        this.updateInventoryList = [],
          // 新增的
          this.insertInventoryList = []
      },
      /** 提交按钮 */
      submitForm() {
        if (this.form.productCode != null) {
          //  修改
          // if(this.listNew.length>0){
          //   this.form.productManUrl = this.listNew[0].url
          // } else {
          //   this.form.productManUrl = ''
          // }
          let arr = this.allList.filter(v => v.storeCode == this.form.storeCode)
          let storeName = arr.length > 0 ? arr[0].storeName : ''
          this.$refs["form"].validate(valid => {
            if (valid) {
              let params = {
                productInfo: {
                  productDescription: this.form.productDescription,
                  storeCode: this.form.storeCode,
                  storeName: storeName,
                  productName: this.form.productName,
                  productManUrl: this.form.productManUrl,
                  productShowPrice: this.form.productShowPrice,
                  productFlag: this.form.productFlag,
                  provinceId: this.form.provinceId,
                  cityId: this.form.cityId,
                  countyId: this.form.countyId,
                  productFrom: this.form.productFrom,
                  fromAddress: this.form.fromAddress,
                  productStory: this.form.productStory,
                  hotSort: this.form.hotSort,
                  saleSort: this.form.saleSort,
                  productCode: this.form.productCode,
                  couponFlag: this.form.couponFlag,
                  delFlag: this.form.delFlag,
                  backProvinceId:this.form.backProvinceId,
                  backCityId:this.form.backCityId,
                  backCountyId:this.form.backCountyId,
                  backFrom:this.form.backFrom,
                  returnUser:this.form.returnUser,
                  returnPhone:this.form.returnPhone,
                  receiveUser:this.form.receiveUser,
                  receivePhone:this.form.receivePhone
                },
                // productInventoryList:this.tableData,
                pastProductInfo: this.pastProductInfo,
                pastInventoryList: this.pastInventoryList,
                // 修改的
                updateInventoryList: this.updateInventoryList,
                // 新增的
                insertInventoryList: this.insertInventoryList,
                // 删除
                deleteInventoryList: this.inventoryIdids,
              }
              updateProductinfo(params).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            }
          });
        } else {
          // 新增
          if (this.listNew.length > 0) {
            this.form.productManUrl = this.listNew[0].url
          } else {
            this.form.productManUrl = ''
          }
          let arr = this.allList.filter(v => v.storeCode == this.form.storeCode)
          let storeName = arr.length > 0 ? arr[0].storeName : ''
          this.$refs["form"].validate(valid => {
            if (valid) {
              let params = {
                productInfo: {
                  productDescription: this.form.productDescription,
                  storeCode: this.form.storeCode,
                  storeName: storeName,
                  productName: this.form.productName,
                  productManUrl: this.form.productManUrl,
                  productShowPrice: this.form.productShowPrice,
                  productFlag: this.form.productFlag,
                  provinceId: this.form.provinceCityCountry[0],
                  cityId: this.form.provinceCityCountry[1],
                  countyId: this.form.provinceCityCountry[2],
                  productFrom: this.form.productFrom,
                  productStory: this.form.productStory,
                  fromAddress: this.form.fromAddress,
                  hotSort: this.form.hotSort,
                  saleSort: this.form.saleSort,
                  backProvinceId:this.form.backProvinceId,
                  backCityId:this.form.backCityId,
                  backCountyId:this.form.backCountyId,
                  backFrom:this.form.backFrom,
                  returnUser:this.form.returnUser,
                  returnPhone:this.form.returnPhone,
                  receiveUser:this.form.receiveUser,
                  receivePhone:this.form.receivePhone
                },
                productInventoryList: this.tableData
              }
              addProductinfo(params).then(response => {
                console.log(111)
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });

            }
          });
        }


        // this.$refs["form"].validate(valid => {
        //   if (valid) {
        //     if (this.form.productCode != null) {
        //       updateProductinfo(this.form).then(response => {
        //         this.$modal.msgSuccess("修改成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     } else {
        //       addProductinfo(this.form).then(response => {
        //         this.$modal.msgSuccess("新增成功");
        //         this.open = false;
        //         this.getList();
        //       });
        //     }
        //   }
        // });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const productCodes = row.productCode || this.ids;
        this.$modal.confirm('是否确认删除商品类目编号为"' + productCodes + '"的数据项？').then(function() {
          return delProductinfo(productCodes);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('store/productinfo/export', {
          ...this.queryParams
        }, `productinfo_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style>
  .multi-line-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 3.0em;
    /* 行高和这个值相乘就是最大高度 */
  }

  .image-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 150px;
      height: 150px;
      margin-right: 3%;
      position: relative;

      span {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
      }
    }
  }
</style>
